<template>
  <div>
    <!--轮播图-->
    <div style="margin: 10px">
      <el-carousel indicator-position="outside" height="720px">
        <el-carousel-item v-for="img in imgs" :key="img">
          <img :src="img" alt="" style="width: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <h3 style="text-align: center">以下是数据文件展示</h3>

    <div style="margin: 10px 0;">
      <el-row :gutter="10">
        <el-col :span="8" v-for="item in files" :key="item.id" style="margin-bottom: 10px;">
          <el-card>
            <img :src="item.url" alt="" style="width: 100%;height: 300px">
            <div style="color: #666">
               {{item.name}}
            </div>
            <el-button type="primary">购买</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      imgs: [
        'https://images8.alphacoders.com/131/1314408.png',
        'https://images4.alphacoders.com/131/1314707.jpg',
        'https://images7.alphacoders.com/131/1319469.png',
        'https://images.alphacoders.com/131/1319515.png'
      ],
      files: []
    }
  },
  created() {
    this.request.get("/echarts/file/front/all").then((res) => {
      console.log(res.data)
      this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'jpeg' || v.type === 'webp')
    })
  }
}
</script>

<style scoped>

</style>